<template>
  <el-row class="classOption">
    <el-col :span="5" class="baseDescription">{{classItem.tno}}</el-col>
    <el-col :span="5" class="baseDescription">{{classItem.tname}}</el-col>
    <el-col :span="5" class="baseDescription">{{classItem.cname}}</el-col>
    <el-col :span="4" class="baseDescription">{{classItem.tno}}</el-col>
    <el-col :span="5" class="baseDescription">
      <el-select size="small" popper-append-to-body="false" v-model="Vals[index]">
        <el-option v-for="it in Levels" :key="it" :value="it" class="mySelect"></el-option>
      </el-select>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { inject } from 'vue'
export default {
  name: 'evaItem',
  props: {
    classItem: Object,
    index: Number
  },
  setup (props: any) {
    const Levels = [
      '优', '良', '中', '差'
    ]
    var Vals: any
    Vals = inject('markArray')
    console.log(props.index)
    return {
      Levels, Vals
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../assets/Fonts/FontMap/FontMap";
  @import "../../../assets/Fonts/FontMap/FontList.css";
  .classOption{
    border-left: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    height: 60px;
    width: 100%;
  }
  .baseDescription{
    height: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-family: $SH_Serif_Regular;
    justify-content: center;
  }
</style>
